<template>
	<div id="syllabus_list" class="container">
		<div class="title">
			{{title}}
		</div>
		<div class="rest" v-show="syllabusAll.length==0">
			<div class="rest_img"></div>
			您这两周都没有课哟。好好休息休息~
		</div>
		
		<div v-show="syllabusAll.length>0">
			<div class="bar_div">
				<div class="bar">
					<div class="bar_btn_left" :class="weekIndex==0? '':'bar_btn_active'" @click="turnWeek(-1)"></div>
					<div class="bar_btn_right" :class="weekIndex==1? '':'bar_btn_active'" @click="turnWeek(1)"></div>
					
					<div v-for="item in dateList[weekIndex]" class="day">
						<div class="day_1" :class="getDayClass(item)"
							 @click="selectDay(item.day)">
							 {{item.day==today? '今':item.date}}
						</div>
							 <!--该日期没有被选中,并且还未过,并且有课-->
						<div class="day_2" v-if="item.day!=checkDay && item.day>today && item.hasPoint"></div>
					</div>
				</div>
			</div>
			
			<div class="stable">
				<div class="shead">
					<div style="width: 2.4rem;">上课时间</div>
					<div style="width: 2.4rem;">上课课节</div>
					<div style="width: 1.6rem;">上课时长</div>
					<div style="width: 2.6rem;">班级/课程</div>
					<div style="width: 1.3rem;">类型</div>
					<div style="width: 4.8rem;text-align:center;">操作</div>
				</div>
				
				<div v-for="item in syllabusList" class="str" 
					:class="[item.status==1?'str_invalid':'',(item.status==2||item.fullTime == nextTime)?'str_active':'']">
					<div style="width: 2.4rem;">
						{{item.time}}
						<span class="mark_span" v-if="item.status==2">上课中</span>
						<span class="mark_span" v-else-if="item.fullTime==nextTime">即将上课</span>
					</div>
					<div style="width: 2.4rem;">{{item.classSyllabusName}}</div>
					<div style="width: 1.6rem;">{{item.minute}}min</div>
					
					<div style="width: 2.6rem;" v-if="item.courseType!=2">
						{{item.className}}
					</div>
					<div style="width: 2.6rem;" v-else>
						<div class="std_two">{{item.courseName}}</div>
						<div class="std_two">{{item.className}}</div>
					</div>
					
					<div style="width: 1.3rem;">{{courseTypeMap[item.courseType]}}</div>
					<div style="width: 4.8rem;" class="operate">
						
						<!--<div class="playback">查看回放</div>-->
						
						<!--双师课-->
						<div class="teacher_classroom" v-if="item.enableFeiboSyllabus==1" @click="openTeacher(item)">
							名师讲堂
							<div class="teacher_time">
								 {{item.realFeiboStartTime.split(' ')[1]}}-{{item.realFeiboEndTime.split(' ')[1]}}
							</div>
						</div>
						<!--线上课-->
						<template v-else-if="item.courseType==5">
							<div class="playback" v-if="item.status==1" @click="openPlayback(item)">查看回放</div>
							<div class="enter_classroom" @click="openClassroom(item)" v-else>进入教室</div>
						</template>
						
						<!--校区自定义课程,不显示这两个按钮   item.courseAttributeType!=2 && -->
						<div class="courseware" v-if="hasPage('44')" @click="openResource(item, 1)">课件播放</div>
						<div class="guidebook" v-if="hasPage('44')" @click="openResource(item, 2)">教参播放</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
var vm,dict,user;
export default {
	data : function() {
		return {
			param : {
				campusId : null,
				teacherOrAssitUserId : null,
				startTime : null,
				endTime : null,
				containTrialClass : 1
			},
			//数据字典
			courseTypeMap : null,
			//选中的日期
			checkDay : null,
			dateList : [[],[]],
			weekIndex : 0,
			syllabusAll : [],
			syllabusList : [],
			syllabusData : {},
			nextTime : null, //最近的开课时间
			today : tool.DateToString(new Date(), "yyyy-MM-dd")
		}
	},
	computed : {
		campusId : function() {
			return this.$store.state.campusId
		},
		title : function() {
			return this.weekIndex==0? "本周课表" : "下周课表";
		},
	},
	methods : {
		getDayClass : function(item) {
			var list = [];
			if(item.day == vm.today) {
				list.push("day_today");
			}
			if(item.day == vm.checkDay) {
				list.push("day_active");
			}
			if(item.hasPoint == false) {
				list.push("day_invalid");
			}
			return list;
		},
		openPlayback : function(syllabus) {
			var path = syllabus.playUrl;
			//判断是否有回放链接
			if(path) {
				window.open(path);
			} else {
				tool.message({showClose: true, message: "暂时没有回放记录", type: 'warning'});
			}
			
		},
		openResource : function(syllabus, index) {
			console.log(syllabus);
			var routeData = router.resolve({ 
				path: vm.$store.state.permit["44"].path, 
				query: {classSyllabusId: syllabus.libraryCourseSyllabusId, index: index,islimited:1}
			});
   			window.open(routeData.href);
		},
		openTeacher : function(syllabus) {
			var path = syllabus.feiboClassUrl;
			//判断是否有名师链接
			if(path) {
				window.open(path);
			} else {
				tool.message({showClose: true, message: "无法进入名师讲堂，请先约名师", type: 'warning'});
			}
		},
		openClassroom : function(s) {
			var path = s.assisUrl || s.patrolUrl || s.teacherUrl;
			//判断是否教室链接
			if(path) {
				window.open(path);
			} else {
				tool.message({showClose: true, message: "无法进入教室，请先创建网络教室", type: 'warning'});
			}
		},
		search : function() {
			vm.param.campusId = vm.campusId;
			api.getClassSyllabus(vm.param).then(function(data) {
				//保存所有课节
				vm.syllabusAll = data.listSyllabus;
				//如果一节课都没,直接结束
				if(vm.syllabusAll.length == 0) {
					return;
				}
				var s = {};
				vm.syllabusData = s;
				//遍历课节,分存到不同日期中
				data.listSyllabus.forEach(function(syllabus) {
					//拼接上课时间
					syllabus.time = syllabus.startTime.substring(11, 16) + "-" + syllabus.endTime.substring(11, 16);
					//唯一标志时间,用于判断nextTime
					syllabus.fullTime = syllabus.startTime + syllabus.endTime;
					//默认状态和课节名
					syllabus.status = 3;
					syllabus.classSyllabusName = syllabus.classSyllabusName || "第"+syllabus.orderBy+"次课";
					
					var t = new Date(syllabus.endTime) - new Date(syllabus.startTime);
					syllabus.minute = t/60000;
					
					//获取日期
					var d = syllabus.startTime.substring(0, 10);
					//分类到对应的数组中
					s[d] = s[d] || [];
					s[d].push(syllabus);
				});
				//遍历有课节的日期,找到未上的最小日期,和上过的最大日期
				var minDay = "null";
				var maxDay = "";
				for(let k in s) {
					if(k >= vm.today && k < minDay) {
						minDay = k;
					}
					if(k < vm.today && k > maxDay) {
						maxDay = k;
					}
				}
				
				//设置最小日期为选中日期,获取课节列表,设置课节状态
				vm.checkDay = (minDay!="null"?  minDay : maxDay);
				vm.syllabusList = s[vm.checkDay];
				vm.setStatus();
				
				//判断各个日期是否有课节
				vm.dateList.forEach(function(list, index) {
					list.forEach(function(item) {
						item.hasPoint = (vm.syllabusData[item.day]? true : false);
						//找到选择日期是第几周
						if(item.day == vm.checkDay) {
							vm.weekIndex = index;
						}
					})
				});
			})
		},
		selectDay : function(day) {
			var list = vm.syllabusData[day];
			if(list) {
				vm.checkDay = day;
				vm.syllabusList = list;
			}
		},
		turnWeek : function(sign) {
			var index = vm.weekIndex + sign;
			if(index == 0 || index == 1) {
				vm.weekIndex = index;
			}
		},
		setTime : function() {
			//日期列表
			vm.dateList = [[],[]];
			//设置时间到上周日
			var c = new Date();
			c.setDate(c.getDate() - (c.getDay()||7));
			//开始遍历2*7次,获取本周和下周
			for(let k=0; k<2; k++) {
				for(let i=0; i<7; i++) {
					//往后推一天
					c.setDate(c.getDate() + 1);
					//创建对象,保存到日期列表中
					vm.dateList[k].push({
						date : tool.DateToString(c, "M.d"),
						day : tool.DateToString(c, "yyyy-MM-dd"),
						hasPoint : null
					});
				}
			}
			//设置接口查询开始结束时间
			vm.param.startTime = vm.dateList[0][0].day + " 00:00:00";
			vm.param.endTime = vm.dateList[1][6].day + " 23:59:59";
		},
		setStatus : function() {
			var now = tool.DateToString(new Date(), "yyyy-MM-dd HH:mm");
			//下次开课时间,最小开始时间
			var nextTime = null;
			var minStart = "null";
			
			vm.syllabusAll.forEach(function(syllabus) {
				var start = syllabus.startTime;
				var end = syllabus.endTime;
				
				if(end <= now) {
//					syllabus.status = "已结课";
					syllabus.status = 1;
					return;
				}
				if(start <= now && now < end) {
//					syllabus.status = "上课中";
					syllabus.status = 2;
				} else {
//					syllabus.status = "上课中";
					syllabus.status = 3;
				}
				
				//在上课中和待上课,找到开课时间最小的
				if(start < minStart) {
					minStart = start;
					nextTime = syllabus.fullTime;
				}
			})
			vm.nextTime = nextTime;
			
			//设置了状态老是不生效，非得重新赋值渲染一次才行???
			var list = vm.syllabusList;
			vm.syllabusList = [];
			vm.syllabusList = list;
		}
	},
	watch : {
		campusId : function() {
			//查询
			vm.search();
		}
	},
	mounted : function() {
		
		
	},
	created : function() {
		vm = this;
		user = tool.getItem(lsKey.user, true);
		vm.param.teacherOrAssitUserId = user.userId;
		//数据字典
		dict = tool.getItem(lsKey.dict, true);
		vm.courseTypeMap = tool.parseDict(dict["course_type"]);
		
		vm.setTime();
		vm.search();
		
		//一分钟自动更新下状态
		var timer = setInterval(function() {
			//获取当前时间
			var now = tool.DateToString(new Date(), "yyyy-MM-dd");
			//过了一天,并且是周一,即翻了一周
			if(now != vm.today && now.getDay() == 1) {
				m.today = now;
				//重新设置时间栏,重新查询
				vm.setTime();
				vm.search();
			}
			//更新课节状态
			vm.setStatus();
		},30000)
		
		vm.$once('hook:beforeDestroy', () => {            
		    clearInterval(timer);                                    
		})
	}
}
</script>

<style scoped lang="scss" src="@/style/work_platform/syllabus_list.css">

</style>